<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Kapow!</title>
    <% doc_width = 1024.0 %>
    <meta name="viewport" content="width=<%= doc_width %>" />
    <script type="application/x-javascript" src="/js/prototype.js"></script>
    <script type="application/x-javascript" src="/js/lectern.js"></script>
    <style type="text/css" media="screen">@import "/css/page.css";</style>
    <style>
      <% panel_w = doc_width / 2 %>
      .panel {
        position: absolute;
        width: <%= panel_w %>px;
        left: 0;
      }
      .panelRight {
        left: <%= panel_w %>px;
      }
      #images img {
        display: none;
      }
    </style>

    <style>
      <% ratio = doc_width / 320.0 %>
      #functionBar {
        width: 100%;
        height: <%= 48 * ratio %>px;
        background: url(/images/function_bar_bg.png) #000;
        -webkit-background-size: 100% 100%;
        visibility: hidden; /* hide until page fully loaded */
        text-align: center;
        vertical-align: center;
        font: bold <%= 11 * ratio %>px Helvetica;
      }
      #functionBar a {
        color: #999;
        text-decoration: none;
        margin: 0 10% 0 3%;
        display: block;
        text-align: center;
        float: left;
      }
      #functionBar a img {
        width: <%= 36 * ratio %>px;
      }
    </style>
    <script type="application/x-javascript">
      var lectern = new Kapow.Lectern();
      Event.observe(
        window, 
        "load", 
        function () { 
          lectern.initialise('<%= escape_javascript(@path) %>', <%= @pagenum %>)
        }
      );
    </script>
  </head>
  <body>
    <div id="images"></div>

    <div class="panel"></div>
    <div class="panel panelRight"></div>
    <div class="panel"></div>
    <div class="panel panelRight"></div>
    <div class="panel"></div>
    <div class="panel panelRight"></div>

    <div id="functionBar">
      <%= link_to_function(
        '<img src="/images/function_next.png" /><br />Next',
        'lectern.next()',
        :style => 'float: right;margin-right: 3%;'
      ) %>

      <%= link_to(
        '<img src="/images/function_toc.png" /><br />' + 
        'Page <span id="pagenum">' + "#{@pagenum.to_i + 1}" + '</span>',
        '/comic',
        {:path => @path, :layout => true},
        {:style => 'float: right'}
      ) %>
      
      <%= link_to_function(
        '<img src="/images/function_previous.png" /><br />Back',
        'lectern.previous()'
      ) %>

      <%= link_to('<img src="/images/function_index.png" /><br />Comics', '/')%>
    </div>

  </body>
</html>
